<template >
<!-- 	
	参数说明
	@show：是否显示
	@title：标题（不设置则不显示）
	@content：内容（不设置则不显示）
	@btn：按钮（不设置则不显示）
	@btnComplete：按钮点击函数 
	@close：关闭函数
	@closeBtnShow：隐藏关闭按钮
-->
	<u-overlay :show="show"  @click="closePopup" :style="{'--main-color-1':configInfo.mainColor,'--main-color-2':configInfo.mainColor1}">
		<uni-transition ref="ani" custom-class="transition" mode-class="zoom-out" :show="show" :styles="style">
			<view class="m-modal">
				<view class="m-modal_conter" @tap.stop>
					<view class="position-relative">
						<view class="m-modal_conter-title text-center text-md p-sm" v-if="title">
							{{title}}
						</view>
						<view class="m-modal_conter-slot flex-center">
							<slot>
								<view class="p-t-md p-b-md">
									{{ content }}
								</view>
							</slot>
						</view>
						<view class="m-modal_conter-btns flex-center m-t-md p-b-md" v-if="btn">
							<u-button 
								shape="circle" 
								:color="configInfo.mainColor" 
								:style="{'width':'50%', 'color':'#555','box-shadow': '0 5px 10px 0 #00000010'}" 
								:text="btn"  
								@click="btnClick" >
							</u-button>
							<!-- <text class="btn btn-radius btn-xs btn-main" :class="{'btn-grey' : btnComplete}" @click="btnClick()" v-if="btn">{{btn}}</text> -->
						</view>
					</view>
				</view>
				<view class="m-modal_close flex-center">
					<u-icon name="close-circle-fill" color="#fffff" size="35"></u-icon>
				</view>
			</view>
		</uni-transition>
	</u-overlay>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		name:"m-modal",
		props: ['show','title','content','btn','btnComplete','closeBtnShow'],
		data() {
			return {
				style: {
					display: "flex",
					flexDirection:"column",
					alignItems: "center",
					justifyContent: "center",
					height: "100%",
				},
			};
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		methods:{
			closePopup(){
				this.$emit('close')
			},
			btnClick(){
				this.$emit('btnComplete')
			},
		}
	}
</script>

<style lang="scss">
	.m-modal{
		width: 80%;
		&_conter{
			background-color: #fff;
			border-radius:10px;
			overflow: hidden;
		}
		&_conter-title{
			background-color: var(--theme-line-four);
			// border-bottom: 1px solid var(--theme-line-four);
		}
		// &_conter-btns{
		// 	.btn{
		// 		max-width: 50%;
		// 	}
		// }
		&_conter-slot{
			
		}
		&_close{
			margin-top: 20px;
			opacity: .5;
		}
		// &_conter{
		// 	background:#fff;
		// 	border-radius:10px;
		// 	// overflow: hidden;
		// }
		// &_close{
		// 	margin-top: 20px;
		// 	z-index: 3;
		// 	opacity: .3;
		// }
		// .u-modal{
		// 	&_title{
		// 		margin: 0px 30rpx;
		// 		padding: 10px;
		// 		font-size: $titleSize;
		// 		text-align: center;
		// 		border-bottom: 1px solid #eee;
		// 	}
		// 	&_conter{
		// 		padding:30px 30rpx;
		// 		max-height:800rpx;
		// 		overflow-y: auto;
		// 		font-size: $contentSize;
		// 		text-align: center;
		// 		color: #555;
		// 		// display: none;
		// 	}
		// 	&_btns{
		// 		margin: 15px;
		// 		margin-top: 0;
		// 		text-align: center;
		// 		padding-bottom: 15px;
		// 		.u-button{
		// 			width: 50%;
		// 		}
		// 	}
			
		// }
	}
	.btn-main{
		background-color: var(--main-color-1)!important;
	}
	/deep/ .slot-content{
		// margin: 30rpx 0;
		// display: none!important;
	}
</style>